<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!doctype html>
<html lang="zh">
<%
	String path = request.getContextPath();
%>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="format-detection" content="telephone=no, email=no" />
	<title> jquery.photoclip.js(jquery图标裁剪插件)  -- 当易网</title>
	<link rel="stylesheet" type="text/css" href="<%=path %>/admin/js/img/normalize.css" />
	<link rel="stylesheet" type="text/css" href="<%=path %>/admin/js/img/default.css">
	<style>
	#clipArea {
		margin: 20px;
		height: 300px;
	}
	#file,
	#clipBtn {
		margin: 20px;
	}
	#view {
		margin: 0 auto;
		width: 200px;
		height: 200px;
	}
	</style>
	<!--[if IE]>
		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body ontouchstart="">
	<article class="htmleaf-container">
		<header class="htmleaf-header">
			<h1>支持移动设手势的jQuery图片裁剪插件 <span>A Support gesture image cropping plug-in</span></h1>
		</header>
		<div id="clipArea"></div>
		<input type="file" id="file">
		<button id="clipBtn">截取</button>
		<div id="view"></div>
		
	</article>
	
	<script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
	<script>window.jQuery || document.write('<script src="<%=path %>/amdin/js/img/jquery-2.1.1.min.js"><\/script>')</script>
	<script src="<%=path %>/admin/js/img/iscroll-zoom.js"></script>
	<script src="<%=path %>/admin/js/img/hammer.js"></script>
	<script src="<%=path %>/admin/js/img/jquery.photoClip.js"></script>
	<script>
	//document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
	$("#clipArea").photoClip({
		width: 200,
		height: 200,
		file: "#file",
		view: "#view",
		ok: "#clipBtn",
		loadStart: function() {
			console.log("照片读取中");
		},
		loadComplete: function() {
			console.log("照片读取完成");
		},
		clipFinish: function(dataURL) {
			console.log(dataURL);
		}
	});
	</script>
</body>
</html>